<template>
  <div style="padding: 10px">
    <!--    功能区域-->
    <div style="margin: 10px 0">



    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="未完成申请" name="first">
        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column prop="id" label="ID" sortable></el-table-column>

          <el-table-column prop="date" label="需要到货日期"></el-table-column>
          <el-table-column prop="applyname" label="申请人"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>


          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope">
              <el-button style="margin-left: 10px" @click="details(scope.row.goodslist)" type="primary">查看详细
              </el-button>
              <el-button style="margin-top: 5px" @click="finish(scope.row.id)" type="danger">补货完成
              </el-button>



            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>

            <el-dialog title="详细信息" v-model="dialogVisible"
                       width="30%">
              <el-table :data="goodslist">

                <el-table-column property="goodsname" label="商品名" width="200"></el-table-column>
                <el-table-column property="count" label="数量/重量（kg）"></el-table-column>






              </el-table>
              <div align="right">
                <el-button style="margin-top: 10px" @click="Export" type="primary">导出补货申请
                </el-button>
              </div>




            </el-dialog>

          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已完成申请" name="second">
        <!--    搜索区域-->
        <div style="margin: 10px 0">

          <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
        </div>

        <el-table :data="tableData_finish" stripe style="width: 100%">
          <el-table-column prop="id" label="ID" sortable></el-table-column>

          <el-table-column prop="date" label="需要到货日期"></el-table-column>
          <el-table-column prop="applyname" label="申请人"></el-table-column>
          <el-table-column prop="state" label="状态"></el-table-column>


          <el-table-column fixed="right" label="操作" width="100">
            <template #default="scope_finish">
              <el-button style="margin-left: 10px" @click="details_finish(scope_finish.row.goodslist)" type="primary">查看详细
              </el-button>



            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>

            <el-dialog title="详细信息" v-model="dialogVisible"
                       width="30%">
              <el-table :data="goodslist_finish">

                <el-table-column property="goodsname" label="商品名" width="200"></el-table-column>
                <el-table-column property="count" label="数量/重量（kg）"></el-table-column>






              </el-table>
              <div align="right">
                <el-button style="margin-top: 10px" @click="Export" type="primary">导出补货申请
                </el-button>
              </div>




            </el-dialog>

          </div>
        </div>
      </el-tab-pane>
<!--      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>-->
<!--      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
    </el-tabs>



  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'Home',

  components: {},
  data() {
    return {
      gridData:{},
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [],
      tableData_finish:[],
      goodslist:[],
      goodslist_finish:[],
      exportlist:[],
      activeName:'first'
    }
  },
  created(){
    this.load()


  },
  methods: {


    load(){
      this.tableData=[];
      this.tableData_finish=[];
      request.get("/replenshment/check",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}
      }).then(res =>{
        res.data.records.forEach(v=>{

          if(v.state==='已处理'){
            this.tableData_finish.push(v)
          }else if(v.state==='未处理'){
            this.tableData.push(v)
          }

        })



        this.total = res.data.total


      })
    },
    finish(id){
      if(confirm("确认完成补货了吗？")){
        request.put("/replenshment/finish/" +id).then(res2 =>{
          if(res2.data!=null) {
            this.$messageBox({

              type:"success",
              message:"处理成功"
            })

          }else {
            this.$messageBox({

              type:"error",
              message:"处理失败"
            })

          }

        })
        this.load()
      }

    },


    Export() {
      let date;
      this.goodslist.forEach(value => {
          date =value.date})
      request.get("/replenshment/getdate",{
        params:{
          date:date
        }
      }).then(res1 =>{
        console.log(res1.data)
        if(res1.data!=null){
          location.href = "http://" + "localhost"+ ":9480/replenshment/export";
        }
      })

    },


    details(goodslist) {

      this.goodslist =goodslist


      this.dialogVisible=true


      // this.form = JSON.parse(JSON.stringify((row)))


    },

    details_finish(goodslist) {
      this.goodslist_finish =goodslist


      this.dialogVisible=true


      // this.form = JSON.parse(JSON.stringify((row)))


    },handleSizeChange( pageSize) { //改变页面显示信息个数
      this.pageSize = pageSize
      this.load()

    }, handleCurrentChange(pageNum) { //改变当前页
      this.currentPage = pageNum
      this.load()
    },


  }
}
</script>
